<template>
	<view style="padding: 20rpx;">
		<view class="box" style="margin-bottom: 10rpx;">
			<uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="160rpx" label-align="right"
				validateTrigger="blur">
				<uni-forms-item label="地址" name="address" required>
					<uni-easyinput type="text" v-model="form.address" placeholder="请输入地址" />
				</uni-forms-item>
				<uni-forms-item label="门牌号" name="door" required>
					<uni-easyinput type="text" v-model="form.door" placeholder="请输入门牌号" />
				</uni-forms-item>
				<uni-forms-item label="联系人" name="username" required>
					<uni-easyinput type="text" v-model="form.username" placeholder="请输入联系人" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phone" required>
					<uni-easyinput type="text" v-model="form.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<view>
					<button type="primary" class="my-button-primary" @click="save">保存并使用</button>
				</view>
			</uni-forms>
		</view>

		<view class="box" style=" overflow-y: auto;">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view v-for="item in addressList" :key="item.id">
					<view style="padding: 10rpx 0; border-bottom: 1px solid #eee;display: flex;">
						<view style="flex: 5;">
							<view style="font-size: 14px; color: #808080; line-height: 20px;">{{ item.address }}</view>
							<view style="font-size: 13px; color: black; line-height: 20px; font-weight: bold;">
								{{ item.door }}
							</view>
							<view style="font-size: 12px; line-height: 20px;"><text
									style="margin-right: 20rpx;">{{ item.username }}</text>
								<text>{{ item.phone }}</text>
							</view>
						</view>
						<view style="margin-top: 20px;flex: 1;">
							<uni-icons type="compose" size="18" color="#888" style="margin-right: 10rpx;"
								@click.native.stop="handleEdit(item)"></uni-icons>
							<uni-icons type="trash" size="18" color="#888"
								@click.native.stop="del(item.id)"></uni-icons>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
				addressList: [],
				form: {},
				rules: {
					address: {
						rules: [{
							required: true,
							errorMessage: '请填写地址',
						}]
					},
					door: {
						rules: [{
							required: true,
							errorMessage: '请填写门牌号',
						}]
					},
					username: {
						rules: [{
							required: true,
							errorMessage: '请填写联系人',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写联系电话',
						}]
					}
				},
			}
		},
		onLoad(option) {
			this.addressType = option.addressType // 地址类型
			this.load()
		},
		methods: {
			del(id) {
				this.$request.del('/address/delete/' + id).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '操作成功'
						})
						this.load()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			handleEdit(address) {
				this.form = JSON.parse(JSON.stringify(address))
			},
			save() {
				this.$refs.formRef.validate().then(valid => {
					if (valid) {
						// 判断是新增还是编辑
						const method = this.form.id ? 'put' : 'post';
						let url = '';

						if (this.form.id) {
							// 编辑操作
							url = '/address/update';
						} else {
							// 新增操作，赋值form.id为user.id
							this.form.userId = this.user.id;
							url = '/address/add';
						}

						this.$request[method](url, this.form).then(res => {
							if (res.code === '200') {
								uni.showToast({
									icon: 'success',
									title: '操作成功'
								});
								this.form = {}; // 重置表单
								this.load();
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								});
							}
						});
					}
				}).catch(error => {
					console.error(error);
				});
			},
			load() {
				this.$request.get('/address/selectAll', {
					userId: this.user.id
				}).then(res => {
					this.addressList = res.data || []
				})
			}
		}
	}
</script>

<style>

</style>